<template>
<!-- 用车申请-->
    <div class="car">
      <div class="nav-bar">
          <div class="icon-left" @click="clickGoBackHandle"><van-icon  class="icon" name="arrow-left" />{{changeData.back}}</div>
          <div class="nav-title">{{changeData.title}}</div>
      </div>
      <div class="job-event" >{{changeData.selectOne}}<div  class="icon" @click="show=true">请选择</div></div>
<!-- <van-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" >
        <van-radio-group v-model="radio">
            <van-radio name="1" @click="chooseHandle">公用</van-radio>
            <van-radio name="2">私用</van-radio>
            <div class="btn">
            <van-button type="default" size="small" >取消</van-button>
            <van-button type="primary" size="small">确认</van-button>
            </div>
        </van-radio-group>
    </div>
  </div>
</van-overlay> -->
      <div class="job-event" >{{changeData.selectTwo}}<div  class="icon">请选择</div></div>
      <div class="job-event" >{{changeData.selectThree}}<div  class="icon">请选择</div></div>
      <div class="job-event event-four" >{{changeData.selectFour}}<div  class="icon">请选择</div></div>
      <div class="add-car"><van-icon name="plus" class="add-icon"/>{{changeData.add}}</div>
      <div class="job-event" >{{changeData.applyPeople}}</div>
      <div class="click-add">
          <div><i class="click-icon">+</i></div>
      </div>
      <div class="job-event" >{{changeData.send}}</div>
      <div class="submit">{{changeData.submit}}</div>
  </div>
</template>

<script>
export default {
name:'CarApply',
data(){
    return{
        radio:'1',
        show:false,
        changeData:{
            back:'返回',
            title:'用车申请',
            selectOne:'申请事由',
            selectTwo:'所属部门',
            selectThree:'开始时间',
            selectFour:'结束时间',
            add:'添加用车',
            applyPeople:'审批人（点击头像可添加）',
            send:'抄送',
            submit:'确认提交'
        }
    }
},
methods:{
    clickGoBackHandle(){
        this.$router.back()
    },
    chooseHandle(e){
        console.log(e);
    }
}
}
</script>

<style scoped lang="less">

  
.car{
    .nav-bar{
        height: 1.3rem;
        line-height:1.3rem;
        background-color: #fff;
        color:#000;
        position: relative;
        .icon-left{
            float:left;
            color:#4e90ff;
            margin-left:0.6rem;   
            .icon{
                position:absolute;
                top:0.32rem;
                left:0.06rem;
                font-size: 30px;
            }
        }
        .nav-title{
            float:left;
            margin-left: 1.8rem;
            font-weight:600;
            letter-spacing: 1px;
        }
    }
    .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    }
    .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
    padding:20px;
    
    }
    .btn{
        margin-top:20px;
    }
    .job-event{
        margin-top:20px;
        height:0.9rem;
        line-height:0.9rem;
        font-weight: 600;
        background-color: #fff;
        padding-left:0.2rem;
        box-shadow: 0 0 1px;
        position:relative;
        .icon{
            float:right;
            margin-right:0.6rem;
            color:#999;
        }
    }
    .event-four{
        margin-top:0;
    }
    .add-car{
        height:0.9rem;
        line-height:0.9rem;
        font-weight: 600;
        background-color: #fff;
        box-shadow: 0 0 1px;
        text-align: center;
        position: relative;
        .add-icon{
            position: absolute;
            top:0.25rem;
            left:2.7rem;
        }
    }
    .click-add{
        height:1.4rem;
        background-color: #fff;
        box-shadow: 0 0 1px;
        padding-left:0.2rem;
        padding-top:0.4rem;
        div{
            width:0.9rem;
            height:0.9rem;
            border:3px solid #999;
            border-radius:50%;          
            position:relative;
            .click-icon{
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                color:#999;            
                font-size: 0.9rem;
            }
        }
    }
    .submit{
        position:absolute;
        bottom:0;
        left:0;
        height:1.1rem;
        width:100%;
        background-color:#4e90ff;
        text-align: center;
        line-height: 1.1rem;
        font-weight:600;
        letter-spacing: 1px;
        color:#fff;
    }
}
</style>